<template>
    <div class="home">
        <!-- 轮播图 -->
        <div class="swiper">
            <el-carousel indicator-position="none" height="600px">
                <el-carousel-item v-for="item in swiperImg" :key="item.id">
                    <img :src="item.imgUrl" />
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 卡片视图专栏 -->
        <div class="column f-cen c">
            <div class="column-item f-col f-cen">
                <img :src="cardImg[0].imgUrl" />
                <b>TECNOLOGIE BIOMEDICHE</b>
                <a href="#" class="column-btn">VEDI DISPOSITIVI</a>
            </div>
            <div class="column-item f-col f-cen">
                <img :src="cardImg[1].imgUrl" />
                <b>CAMPI DI APPLICAZIONE</b>
                <a href="#" class="column-btn">SALUTE E PREVENZIONE</a>
            </div>
            <div class="column-item f-col f-cen">
                <img :src="cardImg[2].imgUrl" />
                <b>FORMAZIONE</b>
                <a href="#" class="column-btn">CALENDARIO COMPLETO</a>
            </div>
        </div>

        <!-- 人体 -->
        <div class="column-life f-cen">
            <div class="column-body-left">
                <img src="../assets/images/home/corpi-molecole.jpg" />
            </div>

            <div class="column-body-item f-col">
                <div class="title f-cen">
                    <div class="deliver-left"></div>
                    <div class="text">Bio-T Technologies for Life</div>
                    <div class="deliver-right"></div>
                </div>Da oltre 10 anni ci occupiamo di salute e innovazione tecnologica.
                <br />Garantiamo ai nostri clienti, in tutto il mondo, prodotti all’avanguardia, affidabili e certificati.
                <br />Ci distinguiamo da sempre per professionalità e competenza nelle fasi di training, formazione ed affiancamento al cliente. Il nostro team di ingegneri, medici e terapeuti è di supporto a tutti gli utilizzatori per permettere di raggiungere i propri obiettivi di cura.
                <br />Ricerchiamo e sviluppiamo con passione e abilità per mettere la tecnologia al servizio della salute, senza mai dimenticare l’aspetto umano, fondamentale nella relazione di cura.
                <br />Dal 2010 ci occupiamo, con devozione e studio, di divulgazione medico scientifica attraverso il Congresso MEDCAM.
                <br />Bio-T unisce da sempre visione olistica della salute e tecnologia avanzata.
                <div></div>
                <a href="#" class="column-body-btn c">VEDI TUTTI I DISPOSITIVI</a>
            </div>
        </div>
        <!-- 居中的文字标题 -->
        <div class="column-middle-title c">
            "Join us in shaping the future of
            <br />Health & Prevention, Resilience & Well-Being, Lifestyle Medicine & Nutrition"
        </div>
        <!-- 应用领域 CAMPI -->
        <div class="column-campi-title">Campi di applicazione</div>

        <div class="column-campi f-cen">
            <div class="column-campi-content f-cen">
                <div class="column-campi-item f" v-for="(item, index) in campi" :key="index">
                    <div class="column-campi-icon f-col">
                        <img :src="item.imgUrl" />
                    </div>
                    <div class="column-campi-text">
                        <h4>{{ item.title }}</h4>
                        <div class="content">{{ item.content }}</div>
                        <a href="#" class="link">APPROFONDISCI</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- quantumvitae专栏 -->
        <div class="column-quantumvitae">
            <div class="column-quantumvitae-main f">
                <div class="block"></div>
                <div class="column-quantumvitae-item f-col">
                    <img src="../assets/images/home/logoquantum.png" alt />
                    <h1>
                        Piattaforma di formazione
                        <br />on line
                    </h1>
                    <div
                        class="column-quantumvitae-item-text"
                    >Sulla Quantum Vitae Academy potrai seguire i nostri corsi di formazione e aggiornamento comodamente dal tuo studio, dalla tua abitazione, direttamente on line negli orari a te più comodi. Iscriviti ora e ricevi subito:</div>
                    <li>1 anno di accesso illimitato a tutti i contenuti e tutte le lezioni</li>
                    <li>tutte le registrazioni dei webinar</li>
                    <li>tutte le promo attive</li>
                    <a href="#" class="column-quantumvitae-btn">ACCEDI ORA</a>
                </div>
            </div>
        </div>
        <!-- 中间标题 -->
        <div class="middle f-cen">
            <div class="middle-text">
                Prenota ora la tua demo dedicata per provare uno dei
                <br />nostri
                dispositivi
            </div>
            <a href="#">
                <div class="middle-btn">CONTATTACI ORA</div>
            </a>
        </div>
        <!-- corsi专栏 -->
        <div class="column-corsi">
            <div class="column-corsi-main f-cen">
                <div class="block"></div>
                <div class="column-corsi-item f-col f-cen">
                    <h1>
                        Corsi di Medicina Energetica ed
                        <br />Informazionale su base Quantistica
                    </h1>
                    <h2>OFFERTA COVID – Corsi Via Zoom</h2>
                    <img src="../assets/images/home/logo-zoom.png" alt />
                    <h3>Prossimi corsi in programma</h3>
                    <div class="column-corsi-box">
                        <div class="column-corsi-box-header c f-cen">
                            <div class="deliver-left"></div>
                            <div class="column-corsi-box-title">Roma</div>
                            <div class="deliver-right"></div>
                        </div>
                        <div class="column-corsi-box-main f-aro">
                            <div class="column-corsi-box-main-item">
                                Giovedì
                                <br />20 Gennaio
                            </div>
                            <div class="column-corsi-box-main-item">
                                Giovedì
                                <br />24 Febbraio
                            </div>
                            <div class="column-corsi-box-main-item">
                                Giovedì
                                <br />24 Marzo
                            </div>
                        </div>
                    </div>
                    <div class="column-corsi-box">
                        <div class="column-corsi-box-header c f-cen">
                            <div class="deliver-left"></div>
                            <div class="column-corsi-box-title">Milano</div>
                            <div class="deliver-right"></div>
                        </div>
                        <div class="column-corsi-box-main f-aro">
                            <div class="column-corsi-box-main-item">
                                Giovedì
                                <br />13 Gennaio
                            </div>
                            <div class="column-corsi-box-main-item">
                                Giovedì
                                <br />14 Febbraio
                            </div>
                            <div class="column-corsi-box-main-item">
                                Giovedì
                                <br />66 Marzo
                            </div>
                        </div>
                    </div>

                    <a href="#" class="column-corsi-btn">VEDI CALENDARIO COMPLETO</a>
                </div>
            </div>
        </div>
        <!-- 中间标题 -->
        <div class="middle f-cen" style="background-color: #235686;">
            <div class="middle-text">Vuoi provare uno dei nostri dispositivi?</div>
            <a href="#">
                <div class="middle-btn">RICHIEDI DEMO</div>
            </a>
        </div>
        <!-- Promozione专栏 -->
        <div class="column-Promozione">
            <div class="column-Promozione-main f-cen">
                <div class="column-Promozione-item">
                    <h1>Promozione ''Rent & Buy''</h1>
                    <h2>OFFERTA COVID</h2>
                    <div class="column-Promozione-item-text">
                        Scopri la soluzione più adatta alle tue esigenze.
                        Acquista ora il tuo dispositivo.
                    </div>
                    <li>
                        <b>Finanziamenti</b> e dilazioni a Tasso 0% a partire da 199€/mese
                    </li>
                    <li>
                        <b>L’iper ammortamento</b>del 170% è disponibile solo fino al 31 Dicembre
                    </li>
                    <li>
                        <b>Credito d’imposta</b> “piano transizione 4.0 – Beni Materiali ed Immateriali, Software e soluzioni in Cloud”
                    </li>
                    <div class="btn f">
                        <a href="#" class="column-Promozione-btn">CONTATTACI ORA</a>
                        <a href="#" class="column-Promozione-btn">RICHIEDI PREVENTIVO</a>
                    </div>
                </div>
                <div class="block"></div>
            </div>
        </div>
        <!-- 新闻轮播图 -->
        <div class="newsSwiper">
            <div class="newsSwiper-title c">Ultime News</div>
            <div
                style="text-align: center;font-size: 14px;"
            >Novità e aggiornamenti su Medicina Quantistica, Salute e Benessere</div>
            <div class="newsSwiper-main">
                <el-carousel :interval="4000" type="card" height="400px">
                    <el-carousel-item v-for="item in newsSwiper" :key="item">
                        <div class="swiper-box">
                            <img :src="item.imgUrl" />
                            <div class="swiper-content">{{ item.title }}</div>
                            <div class="swiper-date">
                                {{ item.date[1] }} |
                                {{ item.date[2] }} |
                                {{ item.date[0] }}
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <a href="#" class="newsSwiper-btn">TUTTE LE NEWS</a>
        </div>
        <!-- 中间标题 -->
        <div class="middle f-cen">
            <div class="middle-text">Vuoi maggiori informazioni sui nostri dispositivi?</div>
            <a href="#">
                <div class="middle-btn">CONTATTACI ORA</div>
            </a>
        </div>
        <!-- medcam专栏 -->
        <div class="medcam f">
            <div class="medcam-main f-cen">
                <div class="medcam-left">
                    <img src="../assets/images/home/logo-big-300x192.jpg" alt />
                    <div class="medcam-title">
                        Prossima edizione 18-19-20 Novembre 2022
                        <br />Palazzo di Varignana - Bologna
                    </div>
                    <p>MEDCAM, Il primo Congresso Accreditato in tema di Medicine Integrate, Scienza e Salute caratterizzato da un taglio fortemente pratico e scientificamente rigoroso.</p>
                    <p>
                        <b>MEDCAM</b> rappresenta un’occasione per condividere e dare il proprio contributo alla costruzione ed allo sviluppo di un percorso terapeutico integrato, consapevole, sociale e sostenibile che abbia sempre al centro l’interesse e la cura del paziente – persona nella sua globalità. Il Programma Scientifico è da sempre impreziosito dalla presenza di Relatori di eccellenza e fama nazionale ed internazionale.
                    </p>
                    <div class="medcam-btn c f">
                        <a href="#" class="medcam-btn-left">VAI AL SITO</a>
                        <a href="#" class="medcam-btn-right">SEGUICI SU FACEBOOK</a>
                    </div>
                </div>
                <div class="medcam-right">
                    <div class="medcam-right-img">
                        <img src="../assets/images/home/medcam-1.jpg" alt />
                    </div>
                    <div class="medcam-right-img">
                        <img src="../assets/images/home/medcam-2.jpg" alt />
                    </div>
                    <div class="medcam-right-img">
                        <img src="../assets/images/home/medcam-3.jpg" alt />
                    </div>
                    <div class="medcam-right-img">
                        <img src="../assets/images/home/medcam-4.jpg" alt />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup >
let swiperImg = [{
    id: "1",
    imgUrl: "src/assets/images/home/slider-top-home.jpg",
}, {
    id: "2",
    imgUrl: "src/assets/images/home/slider2top.jpg",
}, {
    id: "3",
    imgUrl: "src/assets/images/home/slider3-top.jpg",
}
]

let cardImg = [{
    id: "1",
    imgUrl: "src/assets/images/home/box-campi-applicazione-home.jpg",
}, {
    id: "2",
    imgUrl: "src/assets/images/home/box-corsi-home.jpg",
}, {
    id: "3",
    imgUrl: "src/assets/images/home/box-tecnologie-home.jpg",
}
]

let campi = [
    {
        id: "1",
        title: "Salute Promozione della Salute",
        content: "La salute, secondo la definizione del 1948 data dall’OMS (Organizzazione Mondiale della Sanità, WHO) è «uno stato di completo benessere fisico, mentale e sociale e non semplice assenza di malattia».",
        imgUrl: "src/assets/images/home/ico-salute.png",
    },
    {
        id: "2",
        title: "Medicina basata sull’energia e sull’informazione",
        content: 'La medicina energetica (o quantistica) si avvale di diverse tecniche di trattamento non invasive basate sulla biorisonanza. La medicina dell’informazione vede il corpo attraversato da un flusso di informazioni che viaggiano lungo i meridiani.',
        imgUrl: "src/assets/images/home/ico-rehab.png",
    }, {
        id: "3",
        title: `Equilibrio Mentale ed Emozionale`,
        content: 'L’equilibrio mentale è uno stato di benessere che si ottiene lasciando andare i pensieri negativi e le frustrazioni in modo da ottenere soddisfazione e pace per poter sfruttare a pieno il nostro potenziale.',
        imgUrl: "src/assets/images/home/ico-medsportiva.png",
    }, {
        id: "4",
        title: "Benessere Fisico",
        content: 'Con benessere fisico si intente l’insieme di una sana alimentazione, di una regolare attività fisica e l’ auto-monitoraggio, l’auto-protezione e l’auto-regolazione del proprio corpo per migliorare la qualità della propria vita.',
        imgUrl: "src/assets/images/home/ico-medicinasegnale.png",
    }, {
        id: "5",
        title: "Medicina di Segnale",
        content: 'La medicina di segnale si basa sul concetto di segnale biologico ed ha come obiettivo di prevenire e curare le patologie stimolando i segnali biologici positivi e inibendo i segnali biologici negativi come ad esempio l’infiammazione cronica.',
        imgUrl: "src/assets/images/home/ico-medenergetica.png",
    }, {
        id: "6",
        title: "Medicina Riabilitativa",
        content: 'La medicina riabilitativa è la branca della Medicina relativa alla terapia e alla riabilitazione della disabilità, che può insorgere in seguito ad una malattia invalidante o ad un trauma.',
        imgUrl: "src/assets/images/home/ico-biofeedback.png",
    }, {
        id: "7",
        title: "Biorisonanza e Bio Feedback",
        content: 'La biorisonanza è un metodo terapeutico non invasivo e diagnostico delle medicine integrate. Si basa su sull’analisi delle onde elettromagnetiche che il corpo (organi e cellule) genera e sull’autoguarigione.',
        imgUrl: "src/assets/images/home/ico-bilancpsico.png",
    }, {
        id: "8",
        title: "Medicina dello Sport",
        content: 'La medicina dello sport è la branca della medicina che si occupa di sport, della prevenzione e cura delle patologie ad esso correlate.',
        imgUrl: "src/assets/images/home/icobilanciamento.png",
    }, {
        id: "9",
        title: "Riequilibrio Energetico",
        content: 'L’uomo consta di un piano fisico, un piano spirituale e un piano energetico. Su quest’ultimo piano è possibile intervenire ripristinando equilibrio e armonia.',
        imgUrl: "src/assets/images/home/ico-benesserefisico.png",
    },
]

let newsSwiper = [{ imgUrl: "src/assets/images/home/news1.jpg", date: ['2021', 'dec', '22'], title: 'ANTICORPI MONOCLONALI, ALLEATI CONTRO COVID-19' }, { imgUrl: "src/assets/images/home/news2.png", date: ['2020', 'ott', '19'], title: 'RIELABORARE UN RICORDO TRAUMATICO CON L’EMDR. UN AIUTO PER IL MALATO ONCOLOGICO' }, { imgUrl: "src/assets/images/home/news3.jpg", date: ['2020', 'apr', '20'], title: 'La biorisonanza come prevenzione per gli attacchi di panico.' }]

</script>

<style lang="less">
@keyframes myOpacity {
    0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.7;
    }
    75% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}
.swiper {
    position: relative;
    img {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        min-height: 100%;
        margin: auto;
    }
    .el-carousel__item.is-animating {
        animation: myOpacity 0.4s;
        transition: none !important;
    }
    .el-carousel__arrow {
        border-radius: 0;
        width: 30px;
        height: 80px;
        font-size: 30px;
    }
    .el-carousel__arrow--right {
        right: 0;
    }
    .el-carousel__arrow--left {
        left: 0;
    }
}
.column {
    padding: 0 50px;
    position: absolute;
    bottom: -270px;
    left: 50%;
    transform: translate(-50%);
    width: 100%;

    .column-item {
        margin: 20px;
        background-color: @bg1;
        &:nth-child(2) {
            background-color: @bg2;
        }
        &:nth-child(3) {
            background-color: @bg3;
        }
    }
    b {
        color: @text;
        font-size: 18px;
        margin-top: 40px;
        padding: 5px;
    }
    img {
        width: 100%;
    }
    .column-btn {
        border-radius: 5px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
        line-height: 34px;
        background-color: #fff;
        margin-top: 10px;
        margin-bottom: 20px;
        white-space: nowrap;
    }
}
.column-life {
    padding: 0 50px;
    max-width: @box-width;
    margin-top: 450px;
    flex-wrap: wrap;
    margin: 450px auto 0 auto;
    img {
        width: 100%;
        min-width: 400px;
    }
    .column-body-left {
        flex: 1;
    }
    .column-body-item {
        flex: 1;
        line-height: 20px;
        align-self: center;
        font-size: 14px;
        text-align: justify;
        .title {
            color: @text-title;
            font-size: 34px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 20px;
            line-height: 38px;
            .text {
                min-width: 460px;
            }
            .deliver-left {
                width: 100%;
                border: 1px solid #999999;
                margin-right: 10px;
            }
            .deliver-right {
                width: 100%;
                border: 1px solid #999999;
                margin-left: 10px;
            }
        }
        .column-body-btn {
            align-self: center;
            width: 40%;
            color: @text;
            border-radius: 5px;
            font-size: 14px;
            height: 34px;
            line-height: 34px;
            background-color: @bg1;
            margin-top: 20px;
        }
    }
}
.column-middle-title {
    margin: 80px;
    color: @text-bg;
    font-weight: 400;
    font-style: italic;
    font-size: 30px;
}

.column-campi-title {
    font-size: 34px;
    font-weight: bolder;
    text-align: center;
    color: @text-title;
    margin-top: 30px;
}
.column-campi {
    background: url("../assets/images/home/fondo-molecole.jpg") 100% 100%;
    background-size: cover;
    padding: 50px;
    padding-bottom: 150px;
    .column-campi-content {
        max-width: @box-width;
        flex-wrap: wrap;
        .column-campi-item {
            width: 33%;
            padding: 15px;
            .column-campi-icon {
                margin-left: 20px;
                img {
                    margin-top: 3px;
                    max-width: 100;
                    height: auto;
                }
            }
            .column-campi-text {
                font-size: 14px;
                margin-left: 5px;
                h4 {
                    font-size: 20px;
                    color: @text-title;
                }
                .content {
                    text-align: justify;
                }
            }
        }
    }
}
.column-quantumvitae {
    padding: 50px;
    background: url(../assets/images/home/fondo-quantumvitae.jpg) no-repeat;
    background-position: center;
    background-size: cover;

    .column-quantumvitae-main {
        .block {
            width: 60%;
        }
        .column-quantumvitae-item {
            max-width: 460px;
            width: 40%;
            h1 {
                font-size: 34px;
                color: @text-title;
                margin-top: 5px;
            }
            .column-quantumvitae-item-text {
                margin-bottom: 15px;
                font-size: 14px;
                color: @text-main;
            }
            li {
                color: @text-main;
                font-size: 14px;
            }
            .column-quantumvitae-btn {
                margin-top: 40px;
                color: #fff;
                padding: 14px 22px;
                max-width: 150px;
                background-color: @bg1;
                text-align: center;
                font-size: 14px;
                border-radius: 5px;
                font-weight: 200;
            }
        }
    }
}
.middle {
    flex-wrap: wrap;
    padding: 20px;
    background-color: @bg3;
    .middle-text {
        font-style: italic;
        font-size: 34px;
        font-weight: 200;
        text-align: right;
        color: @text;
    }
    .middle-btn {
        color: @text;
        padding: 14px 22px;
        background-color: @bg2;
        text-align: center;
        font-size: 14px;
        border-radius: 5px;
        font-weight: 200;
        margin-left: 50px;
    }
}

.column-corsi {
    padding: 100px 50px;
    background: url(../assets/images/home/fondo-corsi.jpg);
    background-size: cover;
    background-position: center;
    .column-corsi-main {
        .block {
            width: 35%;
        }
        .column-corsi-item {
            width: 40%;
            h1 {
                font-size: 30px;
                color: @text-title;
                margin-top: 5px;
                text-align: center;
            }
            h2 {
                margin-top: 10px;
                color: @text-bg;
            }
            h3 {
                color: @text-title;
                font-size: 24px;
            }
            img {
                width: 250px;
                margin: 10px;
            }
            .column-corsi-box {
                width: 100%;
                .column-corsi-box-header {
                    color: @text-title;
                    font-size: 30px;
                    font-weight: 600;
                    margin-top: 20px;
                    line-height: 38px;
                    .column-corsi-box-title {
                        min-width: 150px;
                    }
                    .deliver-left {
                        width: 100%;
                        border: 1px dashed #fff;
                        margin-right: 10px;
                    }
                    .deliver-right {
                        width: 100%;
                        border: 1px dashed #fff;
                        margin-left: 10px;
                    }
                }
                .column-corsi-box-main {
                    width: 100%;
                    color: @text;
                    .column-corsi-box-main-item {
                        margin: 20px;
                        text-align: center;
                    }
                }
            }

            .column-corsi-btn {
                margin-top: 40px;
                color: @text;
                padding: 8px 22px;
                max-width: 300px;
                background-color: @bg1;
                font-size: 14px;
                border-radius: 5px;
                font-weight: 200;
            }
        }
    }
}
.column-Promozione {
    padding: 100px 50px;
    background: url("../assets/images/home/fondo-Promozione.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;

    .column-Promozione-main {
        width: 100%;
        z-index: 999;
        .block {
            width: 50%;
        }
        .column-Promozione-item {
            max-width: 460px;
            width: 33%;
            h1 {
                font-size: 34px;
                color: @text-w;
            }
            h2 {
                font-size: 22px;
                color: @text-title;
                margin: 10px 0;
            }
            .column-Promozione-item-text {
                margin-bottom: 15px;
                font-size: 14px;
                color: @text-w;
                font-style: italic;
            }
            li {
                color: @text-main;
                font-size: 14px;
            }
            .btn {
                flex-wrap: wrap;
                .column-Promozione-btn {
                    margin-top: 10px;
                    color: @text;
                    padding: 10px 22px;
                    background-color: @text-w;
                    font-size: 14px;
                    border-radius: 5px;
                    font-weight: 200;
                    margin-right: 40px;
                }
            }
        }
    }
}
.newsSwiper {
    background: url("../assets/images/home/fondo-molecole.jpg");
    background-size: cover;
    padding: 100px 25px;
    .newsSwiper-title {
        font-size: 34px;
        color: @text-title;
        font-weight: 600;
    }
    .newsSwiper-main {
        max-width: @box-width;
        margin: 20px auto;
    }
    .swiper-box {
        img {
            width: 100%;
            height: 400px;
            position: relative;
            transition: all 2s;
            &:hover {
                transform: scale(1.2);
            }
        }
        .swiper-content {
            color: @text;
            text-shadow: 0px 0px 2px #000;
            font-weight: 600;
            margin: 20px;
            width: 200px;
            position: absolute !important;
            bottom: 0;
            left: 0;
            font-size: 18px;
            transition: all 0.3s;

            &:hover {
                color: @text-title;
                text-shadow: 1px 1px 1px @text;
            }
        }
        .swiper-date {
            color: @text;
            text-shadow: 0px 0px 2px #000;
            font-size: 18px;
            font-weight: 600;
            margin: 20px;
            position: absolute !important;
            top: -0px;
            right: 0;
            transition: all 0.3s;
            &:hover {
                color: @text-title;
                text-shadow: 1px 1px 1px #fff;
            }
        }
    }

    .el-carousel {
        &__item {
            box-shadow: 1px 1px 10px #999;
        }
    }
    .newsSwiper-btn {
        display: block;
        background-color: @bg1;
        color: @text;
        font-size: 12px;
        padding: 12px 20px;
        border-radius: 5px;
        margin: 10px auto 10px auto;
        width: 140px;
    }
}
.medcam {
    justify-content: center;
    .medcam-main {
        max-width: @box-width;
        padding: 100px 50px 50px 50px;
        .medcam-left {
            width: 50%;
            display: flex;
            margin-right: 40px;
            flex-direction: column;
            img {
                max-width: 300px;
                margin-bottom: 10px;
            }
            p {
                margin: 5px 0;
                font-size: 14px;
                color: #999;
                text-align: justify;
            }
            .medcam-title {
                font-size: 22px;
                font-style: italic;
                color: @text-w;
                margin-bottom: 5px;
            }
            .medcam-btn {
                margin-top: 40px;
                line-height: 50px;
                width: 340px;
                height: 50px;
                background-color: @bg2;
                &-left {
                    width: 40%;
                    color: @text;
                    transition: all 0.6s;
                    box-shadow: @bg2 0px 0px 0px 0px inset;

                    &:hover {
                        box-shadow: @bg3 -136px 0px 0px 0px inset;
                    }
                }
                &-right {
                    width: 60%;
                    background-color: @bg3;
                    color: @text;
                    transition: all 0.6s;
                    box-shadow: @bg3 0px 0px 0px 0px inset;

                    &:hover {
                        box-shadow: @bg2 204px 0px 0px 0px inset;
                    }
                }
            }
        }
        .medcam-right {
            display: flex;
            flex-wrap: wrap;
            width: 50%;
            .medcam-right-img {
                flex-grow: 1;
                margin: 2px;
                img {
                    max-height: 200px;
                    min-width: 100%;
                    max-width: 100%;
                    object-fit: cover;
                    // 使图片等比拉伸，可能会被裁减
                    display: block;
                }
            }
        }
    }
}
</style>

